<template>
  <div class="welcome">
    <div class="top">
      <div class="article">
        <div class="article__user">
          <div class="article__user--avatar">
            <el-avatar size="large"
                       src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
          </div>
          <div class="article__user--info">
            <p class="user--info__nickname">卢本伟</p>
            <p class="user--info__position">web开发工程师</p>
          </div>
          <div class="article__user--setting">
            <!-- 设置按钮 -->
            <i class="iconfont icon-shezhi"
               @click="jumpToMine"></i>
          </div>
        </div>
        <div class="article__date">
          <div class="calendar">
            <el-calendar v-model="date"
                         height="100%">
            </el-calendar>
          </div>
        </div>
      </div>
      <div class="aside">
        <div class="aside--message">
          <div class="aside--message__left">
            <div class="message--left__hello">早上好

            </div>
            <div class="message--left__weather">
              南京天气阴
              <i class="iconfont icon-duoyun"></i>
            </div>
          </div>
          <div class="aside--message__notify">通知公告</div>
        </div>
        <div class="aside--tarsk">
          <div class="tarsk--general">
            <h4>任务概况</h4>
            <div class="echartsGeneral"
                 ref="echartsGeneral"></div>
          </div>
          <div class="tarsk--fact">
            <h4>本月工作进度完成情况</h4>
            <ul class="tarsk--detail__list">
              <li v-for="(item,index) in workDataDetail"
                  :key="item.name+index">
                <p>{{item.value}}</p>
                <p>{{item.name}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 阶段学习情况 -->
    <div class="bottom--achieve">
      <div class="bottom--achieve__left">

        <div class="achieveCharts"
             ref="achieveCharts"></div>
      </div>
      <!-- 期望课程 -->
      <div class="bottom--achieve__right">
        <div class="expectCharts"
             ref="expectCharts"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getTarskData, getRateData, getExpectData } from "@/api"
  //1.引入ecahrts
  import * as echarts from "echarts";
  //2.初始化echarts
  //需要一个dom容器
  //需要一个配置项option
  //特别注意!!!!:容器一定要有高度
  export default {
    data() {
      return {
        date: new Date(),
        workDataDetail: []
      }
    },
    methods: {
      jumpToMine() {
        this.$router.push({ name: "mine" })
      }
    },
    mounted() {
      this.$nextTick(function () {
        let option = {

          tooltip: {
            trigger: 'item',
            show: true
          },
          legend: {
            top: '50%',
            left: 'right',
            orient: "vertical"//排列方式垂直
          },
          color: ["#2DB5A1", "#EA430C", "#8F85E8"],
          series: []
        };
        // 任务概览
        let generalCharts = echarts.init(this.$refs.echartsGeneral); //传递一个dom元素
        //传入配置项
        generalCharts.setOption(option);
        //发送异步请求获取数据
        getTarskData()
          .then(res => {
            let data = res.data.data;
            this.workDataDetail = data;
            let series = {
              name: 'bug修复进度',
              type: 'pie',
              center: ["40%", "50%"],//调整饼图在容器中的位置
              radius: ['50%', '80%'],//半径
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'center', //让数据提示在圆环中间
                formatter: "{d}%",
                textStyle: {
                  fontSize: "20",
                  fontWeight: 'bolder'
                }
              },
              emphasis: { //强调 鼠标移入到饼图上会对该数据进行强调
                label: {
                  show: true,
                  position: "outer",
                  fontSize: '15',
                  fontWeight: 'bold',
                  color: 'red'
                }
              },
              labelLine: {
                show: true
              },
              data
            }
            generalCharts.setOption({
              series
            })
          })

        //阶段学习情况
        let achieveCharts = echarts.init(this.$refs.achieveCharts)
        //期望课程
        let expectCharts = echarts.init(this.$refs.expectCharts)
        //折线图选项
        let achieveChartsOption = {
          legend: {
            left: "85%",
            top: "bottom"
          },
          xAxis: {//x轴
            type: 'category',
            data: [],
            show: false
          },
          yAxis: {
            type: 'value',
            show: false //是否隐藏坐标轴
          },
          label: { //提示内容
            show: true,
            formatter: "{b}:{c}%" //格式化内容
          },
          series: []
        };
        //期望模块饼图选项
        let expectChartsOption = {
          tooltip: {
            show: true,
            trigger: 'item' //散点图和饼图的可以使用item触发
          },
          legend: {//表示数据的提示
            top: '5%',//距离顶部偏移5%
            left: '80%',//靠左排列的位置
            top: 'bottom',//靠顶部排列的位置
            orient: 'vertical',//排列方向 horizontal
            itemWidth: 10, //提示框的宽度
            itemHeight: 10,//提示框的高度
            textStyle: {//设置字体样式
              // color:"#fff"//颜色
            }
          },
          color: ["#D75A3A", "#CE1908", "#55A49F"],//设置环形图颜色
          series: [ //系列

          ]
        };
        achieveCharts.setOption(achieveChartsOption)
        //折线图异步请求
        getRateData()
          .then(res => {
            let data = res.data.data;
            // console.log(data);
            let xData = []
            let sData = data.map(item => {
              xData.push(item.name)
              return item.rate
            })

            achieveCharts.setOption({
              xAxis: {
                data: xData
              },
              series: [{
                name: "学习进度",
                data: sData,
                type: 'line',
                smooth: 1 //是否开启平衡曲线
              }]
            })
          })
        expectCharts.setOption(expectChartsOption)
        //底部环形图异步请求
        getExpectData()
          .then(res => {
            let data = res.data.data;
            let sData = data.map(item => {
              return {
                value: item.rate,
                name: item.title
              }
            })
            expectCharts.setOption({
              series: {
                name: data.desc,
                type: 'pie',
                radius: ['40%', '70%'],//半径
                avoidLabelOverlap: true, //重要属性 防止标签重叠
                label: { //文字数据提示
                  show: true,
                  position: 'outer',//可以是inner center outer设置提示位置
                  formatter: "{b}:{d}%",//\n\n很关键 能够让文字显示在牵引线上方
                  // padding: [0, -50]//文字的padding位置
                },
                emphasis: {//强调(当鼠标移入的时候显示的强调内容)
                  label: {
                    show: true,
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                },
                labelLine: { //牵引线
                  show: true,
                  length: 10, //牵引线长度
                  length2: 10,
                  lineStyle: {//牵引线颜色
                    color: '#808080'
                  },
                },
                data: sData
              }
            })
          })
        window.onresize = function () { generalCharts.resize() }
      });
    },
  };
</script>
<style scoped>
  .calendar >>> .el-calendar-day {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
  .calendar >>> .el-calendar-table thead th {
    padding-top: 0;
    padding-bottom: 0;
  }
  .calendar >>> .el-calendar__header {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .calendar >>> .el-calendar__body {
    padding-top: 0;
    padding-bottom: 0;
  }
  .welcome {
    margin-top: 5px;
    color: #666;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    /* background: #131925; */
  }
  .top {
    display: flex;
    flex: 7;
    justify-content: space-around;
    margin-bottom: 5px;
    margin: 5px;
  }
  .bottom--achieve {
    display: flex;
    flex: 3;
  }
  .bottom--achieve__left {
    flex: 5;
    margin-right: 10px;
  }
  .bottom--achieve__right {
    flex: 5;
  }
  .echartsGeneral {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
  }
  .achieveCharts {
    height: 100%;
  }
  .expectCharts {
    height: 100%;
  }
  .article {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 5px;
  }
  .aside {
    flex: 7;
    display: flex;
    flex-direction: column;
  }
  .aside--message {
    flex: 5;
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;
  }
  .aside--tarsk {
    display: flex;
    justify-content: space-between;
    flex: 5;
    align-items: center;
  }
  div {
    flex-shrink: 0.6;
  }
  .tarsk--general {
    /* width: 100%; */
    height: 100%;
    flex: 5;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
  }
  .tarsk--general h4 {
    text-align: left;
    padding-left: 5%;
    margin-top: 10px;
  }
  .tarsk--fact {
    display: flex;
    flex: 5;
    justify-content: space-between;
    flex-direction: column;
  }
  .tarsk--fact ul {
    margin-top: 15px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .aside--message__left {
    flex: 4;
    display: flex;
    flex-direction: column;
    margin-right: 5px;
  }
  .aside--message__notify {
    display: flex;
    flex: 6;
    display: flex;
    flex-direction: column;
  }
  .message--left__hello {
    flex: 5;
    margin-bottom: 5px;
  }
  .message--left__weather {
    flex: 5;
  }
  .article__user {
    display: flex;
    flex: 4;
    margin-bottom: 5px;
    justify-content: space-around;
    align-items: center;
  }
  .article__user--avatar {
    flex: 3;
  }
  .article__user--info {
    flex: 3;
  }
  .article__user--setting {
    flex: 1;
    height: 100%;
    position: relative;
  }
  .article__user--setting i {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .article__user--avatar >>> .el-avatar--large {
    width: 80px;
    height: 80px;
  }
  .article__date {
    height: 100%;
    flex: 6;
  }

  .article__user,
  .article__date,
  .message--left__hello,
  .message--left__weather,
  .aside--tarsk,
  .aside--message__notify,
  .bottom--achieve {
    /* background: #202835; */
    background: #fff;
    /* border: 1px solid #ccc; */
  }
</style>
